<template>
	<view class="activity-item" @tap="goToActivityDetail">
		<!-- 用户信息部分 -->
		<view class="user-info">
			<view class="user-info-left">
				<image class="avatar" @tap.stop="goToPersonDetail" :src="getUserAvatar" mode="aspectFill" />
				<uni-badge v-if="activity.sysUser.userId+''===currentUserId" class="uni-badge-left-margin" :text="value"
					absolute="rightBottom" size="small">
					<!-- <view class="box"><text class="box-text"></text></view> -->
					<text class="nickname">{{getUserNickName}}</text>
				</uni-badge>
				<text class="nickname" v-else>{{getUserNickName}}</text>
				<view class="team-name" @tap.stop="goToTeamDetail">
					{{activity.teamName}}
				</view>
				<text v-if="activity.distance" class="distance">{{formatDistance(activity.distance)}}</text>
			</view>
		</view>

		<!-- 活动信息部分 -->
		<view class="activity-info">
			<view class="info-item">
				<text class="label">赛事类型:</text>
				<text class="value">{{getSportTypeName(activity.sportType)}}</text>
			</view>
			<view class="info-item">
				<text class="label">活动标题:</text>
				<text class="value">{{activity.title}}</text>
			</view>
			<view class="info-item">
				<text class="label">活动时间:</text>
				<text class="value">{{activity.activityTime}}</text>
			</view>
			<view class="info-item">
				<text class="label">地点:</text>
				<text class="value">{{activity.location}}</text>
			</view>
			<view class="info-item">
				<text class="label">收费方式:</text>
				<text class="value">{{getFeeTypeName(activity.feeType)}}</text>
			</view>
			<view class="info-item">
				<text class="label">报名进度:</text>
				<text class="value">{{activity.signupUserCount}}/{{activity.maxPeople}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listSportType
	} from '@/api/youqiu/activity'

	export default {
		name: 'ActivityItem',
		props: {
			activity: {
				type: Object,
				required: true,
				default: () => ({
					sysUser: {},
					team: {}
				})
			}
		},
		data() {
			return {
				sportTypeMap: new Map(),
				feeTypeMap: new Map(),
				value: '我',
				currentUserId: '',
				userInfo: null,
				isUserInfoLoaded: false
			}
		},
		created() {
			if (this.activity) {
				this.initDictionaries()
			}
			this.initUserInfo()
		},
		computed: {
			getUserAvatar() {
				return this.activity && this.activity.sysUser && this.activity.sysUser.avatar ?
					this.activity.sysUser.avatar :
					'/static/avatars/default-avatar.jpg'
			},
			getUserNickName() {
				return this.activity && this.activity.sysUser && this.activity.sysUser.nickName ?
					this.activity.sysUser.nickName :
					'未知用户'
			},
			// 判断是否是自己发布的活动
			isOwnActivity() {
				if (!this.isUserInfoLoaded || !this.activity?.sysUser) return false
				return String(this.activity.sysUser.userId) === this.currentUserId
			},
			// 安全地获取用户名
			userName() {
				return this.activity?.sysUser?.nickName || this.activity?.sysUser?.userName || '未知用户'
			},
			// 安全地获取用户头像
			userAvatar() {
				return this.activity?.sysUser?.avatar || this.activity?.sysUser?.avatarUrl ||
					'/static/avatars/default-avatar.jpg'
			},
			// 安全地获取球队信息
			teamInfo() {
				return this.activity?.team || {
					name: '',
					logo: '',
					memberCount: 0
				}
			}
		},
		methods: {
			initDictionaries() {
				listSportType('sys_sport_type').then(res => {
					if (res.code === 200) {
						this.sportTypeMap = new Map(
							res.data.map(item => [String(item.dictValue), item.dictLabel])
						)
					}
				})
				listSportType('sys_fee_type').then(res => {
					if (res.code === 200) {
						this.feeTypeMap = new Map(
							res.data.map(item => [String(item.dictValue), item.dictLabel])
						)
					}
				})
			},
			getSportTypeName(type) {
				return this.sportTypeMap.get(String(type)) || '--'
			},
			getFeeTypeName(type) {
				return this.feeTypeMap.get(String(type)) || '--'
			},
			goToActivityDetail() {
				uni.navigateTo({
					url: `/pages/activity/register?id=${this.activity.id}`
				})
			},
			goToTeamDetail() {
				if (this.activity.teamId) {
					uni.navigateTo({
						url: `/pages/team/detail?teamId=${this.activity.teamId}`,
						fail: (err) => {
							console.error('跳转球队详情页失败:', err)
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							})
						}
					})
				}
			},
			goToPersonDetail() {
				const userId = this.activity?.sysUser?.userId
				if (!userId) {
					uni.showToast({
						title: '用户信息不存在',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/profile/detail?userId=${userId}`,
					fail: (err) => {
						console.error('跳转个人详情页失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			},
			formatDistance(distance) {
				console.log('formatDistance',distance)
				if (distance === 0) return '0m'
				if (!distance) return ''
				// 如果距离小于1公里，显示米
				if (distance < 1) {
					return `${(distance * 1000).toFixed(0)}m`
				}
				// 否则显示公里，保留一位小数
				return `${distance.toFixed(1)}km`
			},
			goToProfile() {
				const userId = this.activity?.sysUser?.userId
				if (!userId) {
					uni.showToast({
						title: '用户信息不存在',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/profile/detail?userId=${userId}`
				})
			},
			goToTeamProfile() {
				const teamId = this.activity?.teamId
				if (!teamId) {
					uni.showToast({
						title: '球队信息不存在',
						icon: 'none'
					})
					return
				}
				const isOwnTeam = this.activity?.sysUser?.userId === this.currentUserId
				const url = isOwnTeam ?
					`/pages/team/my-detail/index?teamId=${teamId}` :
					`/pages/team/detail?teamId=${teamId}`
				uni.navigateTo({
					url,
					fail: (err) => {
						console.error('跳转球队主页失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			},
			// 初始化用户信息
			initUserInfo() {
				try {
					const storage_data = uni.getStorageSync('storage_data')
					if (storage_data?.vuex_user_info) {
						this.userInfo = storage_data.vuex_user_info
						this.currentUserId = String(storage_data.vuex_user_info.userId || '')
					}
				} catch (error) {
					console.log('获取用户信息失败:', error)
				} finally {
					this.isUserInfoLoaded = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-item {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8);
		margin: 20rpx 0;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transform: rotate(-5rpx);
	}

	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	.user-info-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16rpx;
		flex: 1;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.nickname {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		flex-shrink: 0;
		line-height: 1.2;
	}

	.team-name {
		font-size: 26rpx;
		color: #4CAF50;
		background-color: #f0f9f0;
		padding: 4rpx 20rpx;
		border-radius: 24rpx;
		cursor: pointer;
		line-height: 1.6;
		flex-shrink: 0;

		&:active {
			opacity: 0.8;
		}
	}

	.activity-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #F4E2D8 20%, #beecd8);
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		justify-content: space-between;

		.label {
			font-size: 26rpx;
			color: #666;
			min-width: 120rpx;
			flex-shrink: 0;
			line-height: 1.5;
		}

		.value {
			font-size: 26rpx;
			color: #333;
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 1.5;
			max-width: 70%;
		}
	}

	.distance {
		font-size: 24rpx;
		color: #ff0000;
		background-color: #f0f9f0;
		padding: 2rpx 12rpx;
		border-radius: 20rpx;
		line-height: 1.4;
		margin-left: auto;
		flex-shrink: 0;
	}
</style>